<template>
  <div>
    <el-form
      :label-width="80"
      :model="form"
      class="myform"
      status-icon
      :rules="rules"
      ref="myform"
    >
      <el-form-item label="手机号码" prop="phone">
        <el-input
          type="text"
          placeholder="请输入"
          v-model="form.phone"
          :prefix-icon="User"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <!-- <el-input
          type="text"
          placeholder="请输入"
          v-model="form.captcha"
          :prefix-icon="User"
        >
          <template #append>
            <el-button @click="startSend" type='success'>发送验证码</el-button>
          </template>
        </el-input> -->
        <!-- el-row 将页面换成了24等份 -->
        <el-row>
          <el-col :span="13">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.captcha"
              :prefix-icon="User"
            >
            </el-input>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-button @click="startSend" type="success">发送验证码</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <p class="flex">
          <el-button type="primary" class="btn" @click="submitForm('myform')"
            >登录</el-button
          >
          <el-button type="danger" class="btn" @click="resetForm('myform')"
            >重置</el-button
          >
        </p>
      </el-form-item>
      <el-form-item class="lastitem">
        <div class="links">
          <router-link class="litem" :to="{ name: 'register' }">
            没有账号,立即注册
          </router-link>
          <router-link class="litem color" :to="{ name: 'forgetpass' }">
            忘记密码
          </router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { ref, toRefs, reactive } from "vue";
import { reg } from "@/utils/validata.js";
import { ElMessage } from "element-plus";
import {toast} from '@/utils'
export default {
  name: "loginPhone",
  setup() {
    reg;
    const myform = ref();
    const startSend = () => {
      console.log("123");
    };
    const state = reactive({
      form: {},
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            pattern: reg.phone,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
          {
            pattern: reg.code,
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
      },
    });
    const resetForm = () => {
      myform.value.resetFields();
    };
    const submitForm = () => {
      myform.value.validate((valid) => {
        if (valid) {
          //如果正则判断成功则发送请求
        } else {
          toast.error("请输入有效的验证信息")
        }
      });
    };
    return {
      myform,
      ...toRefs(state),
      startSend,
      resetForm,
      submitForm,
    };
  },
};
</script>

<style lang="scss" scoped>
.myform {
  ::v-deep .el-input-group__append {
    background: #67c23a;
  }
}
</style>